<template>
    <!-- Vue的Transition组件，用于实现动画 -->
    <Transition name="fade-in-out">
        <div v-if="modelValue" class="fixed-element">
            <div class="content">
                <div class="icon-placeholder"></div>
                <div class="message-container">
                    <p class="main-message">恭喜获得 {{ message }} 个租币!</p>
                    <p class="sub-message">任务完成</p>
                </div>
            </div>
            <div class="number-message">+{{ message }}</div>
        </div>
    </Transition>
</template>

<script setup lang="ts">
defineProps<{
    modelValue: boolean; // 用于 v-model，控制显示/隐藏
    message: number;
}>();
</script>

<style scoped lang="scss">
.fixed-element {
    // 定位在底部中心
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;

    // 样式
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 20px;
    background-color: rgba(0, 0, 0, 0.7); // 深色背景
    color: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    min-width: 300px;


    .icon-placeholder {
        background-image: url('@/assets/shopStoreImg/编组 19@2x.png');
        background-size: cover;
        width: 43px;
        height: 43px;
        border-radius: 50%;
        margin-right: 5px;
        flex-shrink: 0;
    }

    .content {
        display: flex;
        align-items: center;

        .message-container {
            .main-message {
                font-size: 16px;
                color: #FFFFFF;
                margin-bottom: 5px;
            }

            .sub-message {
                font-size: 12px;
                color: rgba(255, 255, 255, 0.7);
                margin-top: 4px;
            }
        }

    }

    .number-message {
        font-weight: 300;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 28px;
        text-align: left;
        font-style: normal;
    }
}

/* --- Transition 动画 --- */

/* 进入和离开动画 */
.fade-in-out-enter-from,
.fade-in-out-leave-to {
    opacity: 0;
}

.fade-in-out-enter-active {
    transition: opacity 0.5s ease-in;
    /* 淡入：0.5s */
}

.fade-in-out-leave-active {
    transition: opacity 0.5s ease-out;
    /* 淡出：0.5s */
}

/* 进入后停留 0.5s 再淡出（通过 JS 的 setTimeout 控制） */
.fade-in-out-enter-to {
    opacity: 1;
}
</style>